<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>商品后台管理系统</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
    <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
    <meta name="author" content="yinqi">

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <!--对话框-->
    <link rel="stylesheet" href="js/jconfirm/jquery-confirm.min.css">
    <link href="css/style.min.css" rel="stylesheet">

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!--对话框-->
    <script src="js/jconfirm/jquery-confirm.min.js"></script>
    <script type="text/javascript" src="js/main.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
<div class="container-fluid p-t-15">

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-toolbar clearfix">
                    <!-- <form class="pull-right search-bar" method="get" action="#!" role="form">
                         <div class="input-group">
                             <div class="input-group-btn">
                                 <input type="hidden" name="search_field" id="search-field" value="title">
                                 <button class="btn btn-default dropdown-toggle" id="search-btn" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
                                     标题 <span class="caret"></span>
                                 </button>
                                 <ul class="dropdown-menu">
                                     <li> <a tabindex="-1" href="javascript:void(0)" data-field="title">标题</a> </li>
                                     <li> <a tabindex="-1" href="javascript:void(0)" data-field="cat_name">栏目</a> </li>
                                 </ul>
                             </div>
                             <input type="text" class="form-control" value="" name="keyword" placeholder="请输入名称">
                         </div>
                     </form>-->
                    <div class="toolbar-btn-action">
                        <button class="btn btn-success m-r-5 example-p-5"><i class="mdi mdi-check"></i> 审核通过</button>
                        <button class="btn btn-warning m-r-5 example-p-6"><i class="mdi mdi-block-helper"></i> 审核下架</button>
                        <button class="btn btn-danger example-p-4"><i class="mdi mdi-window-close"></i> 删除</button>
                    </div>
                </div>
                <div class="card-body" id="app">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>
                                    <label class="lyear-checkbox checkbox-primary">
                                        <input type="checkbox" id="check-all" v-model="checkedAll" @click="check_all()"><span></span>
                                    </label>
                                </th>
                                <th>序号</th>
                                <th>产品名</th>
                                <th>产品数量</th>
                                <th>产品图片</th>
                                <th>卖家</th>
                                <th>分类</th>
                                <th>审核状态</th>
                                <th>围观次数</th>
                                <th>上架时间</th>
                                <th>拍卖时间</th>
                                <th>起拍价</th>
                                <th>佣金</th>
                                <th>保证金</th>
                                <th>加价幅度</th>
                                <th>详情介绍</th>
                                <th>拍卖地</th>
                            </tr>
                            </thead>
                            <tbody >
                            <tr v-for="product in arrayData" :key="product.p_id">
                                <td>
                                    <label class="lyear-checkbox checkbox-primary">
                                        <input type="checkbox"  v-bind:value="product.p_id" v-model="checked"><span></span>
                                    </label>
                                </td>
                                <td>{{product.p_id}}</td>
                                <td>{{product.name}}</td>
                                <td>{{product.num}}</td>
                                <td style="height: 40px;width: 40px"><img v-bind:src="product.picture"></td>
                                <td>{{product.u_id}}</td>
                                <td>{{product.ct_id}}</td>
								<td v-if="product.audit_status===1">通过审核</td>
                                <td v-else>未通过审核</td>
                                <td>{{product.heat}}</td>
                                <td>{{product.date_issued}}</td>
                                <td>{{product.auction_time}}</td>
                                <td>{{product.starting_price}}</td>
                                <td>{{product.commission}}</td>
                                <td>{{product.deposit}}</td>
                                <td>{{product.bid_increment}}</td>
                                <td>{{product.details}}</td>
                                <td>{{product.auction_site}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--分页-->
                    <div class="pager" id="pager">
                    <span class="form-inline">
                        <select class="form-control" v-model="pagesize" @change="showPage(pageCurrent,true)" number>
                            <option value="10">5</option>
                            <option value="10">10</option>
                            <option value="20">20</option>
                            <option value="30">30</option>
                            <option value="40">40</option>
                        </select>
                    </span>
                        <template v-for="item in pageCount+1">
                        <span v-if="item==1" class="btn btn-default" @click="showPage(1)">
                            首页
                        </span>
                            <span v-if="item==1" class="btn btn-default" @click="showPage(pageCurrent-1)">
                            上一页
                        </span>
                            <span v-if="item==1" class="btn btn-default" @click="showPage(item)">
                            {{item}}
                        </span>
                            <span v-if="item==1&&item<showPagesStart-1" class="btn btn-default disabled">
                            ...
                        </span>
                            <span v-if="item>1&&item<=pageCount-1&&item>=showPagesStart&&item<=showPageEnd&&item<=pageCount" class="btn btn-default" @click="showPage(item)">
                            {{item}}
                        </span>
                            <span v-if="item==pageCount&&item>showPageEnd+1" class="btn btn-default disabled">
                            ...
                        </span>
                            <span v-if="item==pageCount" class="btn btn-default" @click="showPage(item)">
                            {{item}}
                        </span>
                            <span v-if="item==pageCount" class="btn btn-default" @click="showPage(pageCurrent+1)">
                            下一页
                        </span>
                            <span v-if="item==pageCount" class="btn btn-default" @click="showPage(pageCount)">
                            尾页
                        </span>
                        </template>
                        <span class="form-inline">
                        <input class="pageIndex form-control" style="width:60px;text-align:center" type="text" v-model="pageCurrent" v-on:keyup.enter="showPage(pageCurrent,true)" />
                    	</span>
                        <span>{{pageCurrent}}/{{pageCount}}</span>
                    </div>

                </div>
            </div>
        </div>

    </div>

</div>
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            //总项目数
            totalCount: 10,
            //分页数
            pageCount: 10,
            //当前页面
            pageCurrent: 1,
            //分页大小
            pagesize: 5,
            //显示分页按钮数
            showPages: 7,
            //开始显示的分页按钮
            showPagesStart: 1,
            //结束显示的分页按钮
            showPageEnd: 15,
            //分页数据
            arrayData: [],

            checked:[],
            checkedAll:false,
        },
        mounted: function () {
            this.showPage(this.pageCurrent,true);


        },
        methods: {
            //请求数据
            getProduct: function(pageCurrent, pagesize){
                axios.get('product/allProducts', {params: {pageNum:pageCurrent,pageSize:pagesize}}).then(res => {
                    console.info(res.data.data);
                    var that=res.data.data;

                    this.arrayData=that.list;

                    this.totalCount=that.total;
                    this.pageCount=that.pages;
                    this.pageCurrent=that.pageNum;
                    this.pagesize=that.pageSize;
                    this.showPages=that.pageSize;


                });
            },

            //分页方法
            showPage: function (pageIndex, forceRefresh) {

                if (pageIndex > 0) {


                    if (pageIndex > this.pageCount) {
                        pageIndex = this.pageCount;
                    }

                    //判断数据是否需要更新
                    var currentPageCount = Math.ceil(this.totalCount / this.pagesize);
                    if (currentPageCount != this.pageCount) {
                        pageIndex = 1;
                        this.pageCount = currentPageCount;
                    }
                    else if (this.pageCurrent == pageIndex && currentPageCount == this.pageCount && typeof (forceRefresh) == "undefined") {
                        alert("not refresh")
                        return;
                    }
                    //数据请求
                    this.getProduct(pageIndex, this.pagesize);
                    //处理分页点中样式
                    var buttons = $("#pager").find("span");
                    for (var i = 0; i < buttons.length; i++) {
                        if (buttons.eq(i).html() != pageIndex) {
                            buttons.eq(i).removeClass("active");
                        }
                        else {
                            buttons.eq(i).addClass("active");
                        }
                    }
                    //计算分页按钮数据
                    if (this.pageCount > this.showPages) {
                        if (pageIndex <= (this.showPages - 1) / 2) {
                            this.showPagesStart = 1;
                            this.showPageEnd = this.showPages - 1;
                            // console.log("showPage1")
                        }
                        else if (pageIndex >= this.pageCount - (this.showPages - 3) / 2) {
                            this.showPagesStart = this.pageCount - this.showPages + 2;
                            this.showPageEnd = this.pageCount;
                            // console.log("showPage2")
                        }
                        else {
                            // console.log("showPage3")
                            this.showPagesStart = pageIndex - (this.showPages - 3) / 2;
                            this.showPageEnd = pageIndex + (this.showPages - 3) / 2;
                        }
                    }
                    // console.log("showPagesStart:" + this.showPagesStart + ",showPageEnd:" + this.showPageEnd + ",pageIndex:" + pageIndex);
                }

            },

            delete: function () {
                if (confirm('确定要删除吗')) {
                    //console.log(index, age);

                    var newArray = [];
                    for (var i = 0; i < this.arrayData.length; i++) {
                        if (i != index) {
                            newArray[newArray.length] = this.arrayData[i];
                        }
                    }
                    this.arrayData = newArray;
                }
            },
            //取消、选中
            check_all: function()  {
                if(this.checkedAll){
                    // 全不选
                    this.checked = [];
                }else{
                    // 全选
                    this.arrayData.forEach((product)=>{
                        this.checked.push(product.p_id);
                        console.info( this.checked)

                    })
                }
            },
            //批量修改
            batch_Update: function(status)  {
            	let arr =this.checked;
                axios.get('product/batchUpdateProducts', {params: {ids:arr+"",audit_status:status}}).then(res => {
                    console.info(res.data)
                    if(res.data.status=="success"){
                        alert("成功修改"+res.data.data+"条");
                        var data=this.arrayData;
                        for (var i=0;i<data.length;i++){
                        	 if (arr.includes(data[i].p_id)){ 
                        		 console.log("修改p_id...."+data[i].p_id);
                        		 this.arrayData[i].audit_status=status
                        		 console.log(this.arrayData[i].audit_status);
                        }
                        }

                    }else{
                    	alert("操作失败");
                    }

                });


            },
            //批量删除
            batch_Delete: function()  {
            	let arr =this.checked;
                axios.get('product/batchDeleteProducts', {params: {ids:arr+""}}).then(res => {
                    console.info(res.data)
                    if(res.data.status=="success"){
                        alert("成功删除"+res.data.data+"条");
                        var data=this.arrayData;
                        for (var i=0;i<data.length;i++){
                        	
                        	 if (arr.includes(data[i].p_id)){ 
                        		 console.log("删除p_id...."+data[i].p_id);
                        		 data.splice(i,1);
                        		 i-=1; //要让i随着被截取后数组长度的变化而变化，截取一个，i少一次
                        }
                        }
                 

                    }else{
                    	alert("操作失败");
                    }


                });

            }

        }
    });
</script>
<script type="text/javascript">
    $(function(){
        $('.search-bar .dropdown-menu a').click(function() {
            var field = $(this).data('field') || '';
            $('#search-field').val(field);
            $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
        });
    });
    $('.example-p-4').on('click', function () {
        $.confirm({
            title: '',
            content: '删除产品？',
            type: 'red',
            typeAnimated: true,
            buttons: {
                tryAgain: {
                    text: '确定',
                    btnClass: 'btn-red',
                    action: function(){
                        vue.batch_Delete();
                    }


                },
                close: {
                    text: '关闭'
                }
            }
        });
    });
    $('.example-p-5').on('click', function () {
        $.confirm({
            title: '',
            content: '审核通过？',
            type: 'green',
            buttons: {
                omg: {
                    text: '确定',
                    btnClass: 'btn-green',
                    action: function(){
						vue.batch_Update(1);
                    }
                },
                close: {
                    text: '关闭',
                }
            }
        });
    });
    $('.example-p-6').on('click', function () {
        $.confirm({
            title: '',
            content: '审核下架？',
            type: 'orange',
            typeAnimated: false,
            buttons: {
                omg: {
                    text: '确定',
                    btnClass: 'btn-orange',
                    action: function(){
                    	vue.batch_Update(0);
                    }
                },
                close: {
                    text: '关闭',
                }
            }
        });
    });
</script>
</body>
</html>